<template>
    <div class="tirBox">
        <div class="record-scroll-box" ref="scrollWrap">
            <template v-if="list && list.length>0">
                <table ref="recordTable" class="recordTable">
                    <tr>
                        <th class="tleft" v-t="'income.th9'">Project</th>
                        <th width="100" v-t="'income.th3'">Amount</th>
                        <th v-t="'income.th10'">Object</th>
                        <th width="150" v-t="'income.th5'">Time</th>
                    </tr>
                    <tr v-for="(dt,index) in list" :key="index">
                        <td class="tleft">{{dt.title}}</td>
                        <td>{{dt.incomeAmount?dt.incomeAmount.decimalFourString:'--'}}</td>
                        <td>{{dt.userName}}</td>
                        <td>{{dt.redPacketTime}}</td>
                    </tr>
                </table>
                <div style="display: flex;justify-content: center;">
                    <van-loading size="14px" v-if="!finished">loading...</van-loading>
                </div>
            </template>
            <div v-else class="nodata">
                <empty/>
            </div>
        </div>
    </div>
    
</template>

<script>
import { reactive,toRefs,getCurrentInstance,computed,onMounted} from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import { Loading  as vanLoading } from "vant";
import empty from '@/components/empty.vue'
import { useI18n } from 'vue-i18n'

export default {
    components:{
        empty,
        vanLoading
    },
    props:{

    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()
        const {t} = useI18n()

        const state = reactive({
            userInfo:computed(()=>store.state.base.userInfo),
            list:[],
            pageIndex:1,
            finished:false,
            scrollWrap:''
        })

        onMounted(()=>{
            getList()
                
            state.scrollWrap = proxy.$refs.scrollWrap 
            state.scrollWrap.onscroll = onScroll
        })

        const onScroll = ()=>{
            state.scrollWrap = proxy.$refs.scrollWrap
            let conWrap = proxy.$refs.recordTable
            const scrollWrap_h = state.scrollWrap.offsetHeight 
            const conWrap_h = conWrap.offsetHeight
            const top = state.scrollWrap.scrollTop
            if((conWrap_h-scrollWrap_h-top)<=10){
                if(!state.finished){
                    state.scrollWrap.onscroll = null
                    setTimeout(()=>{
                        getList()
                    },500)
                }
                
            }
        }

        const getList = () =>{
            return new Promise((resolve,reject) =>{
                store.dispatch('capital/get_my_other_income_list',{
                    walletAddress:state.userInfo.walletAddress,
                    limit:50,
                    page: state.pageIndex,
                    orderField: "",
                    orderType: "",
                    scope:0
                }).then(res =>{
                    state.list =[...state.list,...res.data] 
                    state.pageIndex++;
                    if (state.list.length >= res.total) {
                        state.finished = true;
                        state.scrollWrap.onscroll = null
                    }else{
                        state.scrollWrap.onscroll = onScroll
                    }
                    resolve(true)
                })
            }) 
        }

        return{
            ...toRefs(state)
        }
    }
}
</script>

<style lang="scss" scoped>
    .tirBox{
        height: 100%;
        overflow: hidden;
        padding: 20px 30px 30px 30px;
        .record-scroll-box{
            width: 100%;
            height: 100%;
            overflow: hidden;
            overflow-y: auto;
        }
        .recordTable{
            border-collapse: collapse;
            width: 100%;
            border: 0;
            line-height: normal;
            font-family: Inter-Medium, Inter;
            font-weight: 500;
            color: #FFFFFF;
            text-align: center;
            th{
                height: 60px;
                color: #67F8FF;
                font-size: 24px;
                border-bottom: 1px dashed #285E9A;
            }
            td{
                font-size: 24px;
                min-height: 90px;
                //padding: 16px 0 10px 0;
                border-bottom: 1px dashed #285E9A;
                line-height: 30px;
            }
            .tleft{
                text-align: left;
            }
            .type{
                color: #999;
                font-size: 22px;
                padding: 10px 0 0 0;
            }
        }
    }
    
</style>